import { _decorator, clamp, Component, director, EventTouch, game, instantiate, Node, size, UITransform, v2, v3, v4, Vec2, Vec3 } from 'cc';
import { PixelSprite } from './pixelSprite/assets/PixelSprite';
import { GridColliderMgr } from './gridCollision/GridColliderMgr';
import { CustomEventType } from './GlobalEnum';
const { ccclass, property, executeInEditMode } = _decorator;

const tmpV2_0 = v2();
const tmpV2_1 = v2();
const tmpV3_0 = v3();
const tmpV3_1 = v3();
const tmpV4_0 = v4();

@ccclass('GridMap')
@executeInEditMode
export class GridMap extends Component {

    protected onLoad(): void {
        game.frameRate = 60;
        this.onEvents();
    }

    onEnable(): void {
        this.initMap();
    }

    onDisable() {
        this.resetMap();
    }

    update(dt: number) {

    }
    //#region ----事件
    onEvents() {
        director.on(CustomEventType.CheckWpos, this.onCheckWpos, this);
        director.on(CustomEventType.FormatWpos, this.onFormatWpos, this);

    }
    onCheckWpos(wp: Vec2) {

    }
    // 转换为小网格坐标
    onFormatWpos(wp: Vec2) {
        this.floorPos(tmpV2_0.set(wp.x, wp.y));
        tmpV2_0.x = clamp(tmpV2_0.x, -1, this.smallGrigSize.width);
        // console.log(tmpV2_0.x, tmpV2_0.y);
        wp.x = this.ltWpos.x + tmpV2_0.x * this.smallGridWidth;
        wp.y = this.ltWpos.y - tmpV2_0.y * this.smallGridWidth;
    }

    //#endregion

    //#region ----地图数据
    // 整个地图网格尺寸
    panelSize = size(0, 0);

    // 左上角世界坐标
    ltWpos = v2(0, 0);

    // 大网格数量
    @property
    bigGridSize = size(10, 10);
    // 大网格显示图片
    @property(PixelSprite)
    bigPixelSprite: PixelSprite = null;

    // 小网格与大网格的数量比例
    smallGridRate = 4;
    // 小网格大小
    smallGridWidth = 20;
    // 小网格数量
    smallGrigSize = size(10, 10);
    // 小网格显示图片
    @property(PixelSprite)
    smallPixelSprite: PixelSprite = null;

    smallGridData: { [idx: number]: { pos: Vec3, isUsed: boolean } } = {};
    smallGridArr: number[] = [];

    //test
    @property(Node)
    testItem: Node = null;

    initMap() {
        this.bigPixelSprite.node.setPosition(this.node.position);
        this.smallPixelSprite.node.setPosition(this.node.position);

        // 根据排列数量 计算出 this.smallGridWidth 大小
        const maxWidth = 620;
        this.smallGridWidth = Math.floor(maxWidth / (this.bigGridSize.width * this.smallGridRate));

        this.createMap();
        this.node.getComponent(UITransform).setContentSize(this.panelSize);
        console.log('map:', this.panelSize);
        // 左上角
        this.ltWpos.set(this.node.worldPosition.x - this.panelSize.width / 2, this.node.worldPosition.y + this.panelSize.width / 2);
    }
    resetMap() {
        this.smallGridArr.length = 0;
        this.smallGridData = {};
    }

    createMap() {
        // 小网格数量
        const smallGSize = size(
            this.bigGridSize.width * this.smallGridRate,
            this.bigGridSize.height * this.smallGridRate
        )
        this.smallGrigSize.set(smallGSize);
        // 整个地图网格尺寸
        const panelSize = size(
            smallGSize.width * this.smallGridWidth,
            smallGSize.height * this.smallGridWidth);
        this.panelSize.set(panelSize);

        this.smallPixelSprite.node.getComponent(UITransform).setContentSize(panelSize);

        const pos = v3();
        const offsetX = -(smallGSize.x - 1) * this.smallGridWidth * 0.5;
        const offsetY = -(smallGSize.y - 1) * this.smallGridWidth * 0.5;

        this.smallGridArr.length = 0;
        this.smallGridData = {};

        //test
        this.node.removeAllChildren();

        let idx = 0;
        for (let y = 0; y < smallGSize.y; y++) {
            for (let x = 0; x < smallGSize.x; x++) {
                pos.set(x * this.smallGridWidth + offsetX, y * this.smallGridWidth + offsetY);
                this.smallGridData[idx] = { pos: v3(pos), isUsed: false };
                this.smallGridArr.push(1);
                idx++;

                //test
                // const node = instantiate(this.testItem);
                // node.parent = this.node;
                // node.setPosition(pos);
                // node.getComponent(UITransform).setContentSize(this.smallGridWidth, this.smallGridWidth);
            }
        }
        // 显示网格
        this.smallPixelSprite.setData(smallGSize.width, smallGSize.height, this.smallGridArr);

        // 大网格
        this.bigPixelSprite.setData(this.bigGridSize.width, this.bigGridSize.height);
        this.bigPixelSprite.node.getComponent(UITransform).setContentSize(panelSize);
    }
    // 设置小网格指定位置是否显示 二维数组下标 左上角->右下角
    setSmallPixelData(x, y, isShow) {
        tmpV4_0.x = isShow ? 255 : 0;
        this.smallPixelSprite.updateData(x, y, tmpV4_0);
    }

    //#endregion

    //#region ---网格碰撞管理器
    // initCldMgr() {
    //     GridColliderMgr.inst.init(this.smallGridWidth);
    // }

    //#endregion

    // //#region ----注册地图触摸事件---

    // onTouchEvents() {
    //     this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
    //     this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    //     this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
    //     this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
    // }
    // initTouch() {

    //     this.onTouchEvents();
    // }
    // enableTouch() {

    // }
    // disableTouch() {

    // }
    // updateTouch(dt) {

    // }

    // onTouchStart(event) {
    //     event.getUILocation(tmpV2_0);

    // }

    // onTouchMove(event) {
    //     this.getTouchPos(event, tmpV2_0);
    //     // this.setSmallPixelData(tmpV2_0.x, tmpV2_0.y, false);
    // }

    // onTouchEnd(event) {
    //     this.getTouchPos(event, tmpV2_0);
    //     // this.setSmallPixelData(tmpV2_0.x, tmpV2_0.y, false);
    // }

    // // 获取触摸位置
    // getTouchPos(event: EventTouch, out: Vec2) {
    //     event.getUILocation(out);
    //     this.floorPos(out);
    // }

    // //#endregion


    //#region ----工具函数---
    // 获取小网格下的坐标
    floorPos(_v2: Vec2, stepW?) {
        stepW = stepW || this.smallGridWidth;
        _v2.x = Math.floor((_v2.x - this.ltWpos.x) / this.smallGridWidth);
        _v2.y = Math.floor((this.ltWpos.y - _v2.y) / this.smallGridWidth);
        return _v2;
    }

    //#endregion


}


